<template>
    <div>
        <div class="banner">
            <img src="@/endtable/endtablebanner.png"/>
        </div>
        <div class="wrapper">
            <div class="floor1">
                <div class="title">
                    <span>
                        <img src="@/endtable/endtabletitle.png"/>
                    </span>
                </div>
                <div class="banner1">
                    <img src='@/endtable/endtablebanner1.png'>
                </div>
            </div>
            <div class="floor2">
                <ul>
                    <li v-for="(item,index) of goodsList[0]" :key="index">
                        <router-link :to="{path:'/details',query:{id:item.id}}">
                            <div class="goodsImg">
                                <img :src='item.pic1'>
                            </div>
                            <span>{{item.name}}</span>
                            <span>￥{{item.price}}</span>
                        </router-link>
                    </li>
                </ul>
            </div>
            <div class="floor3">
                <div class="adbanner">
                    <img src="@/endtable/endtablebanner2.png">
                </div>
            </div>
            <div class="floor4">
                <ul>
                    <li v-for="(item,index) of goodsList[1]" :key="index">
                        <router-link :to="{path:'/details',query:{id:item.id}}">
                            <div class="goodsImg">
                                <img :src='item.pic1'>
                            </div>
                            <span>{{item.name}}</span>
                            <span>￥{{item.price}}</span>
                        </router-link>
                    </li>
                    <li>
                        <img src="@/endtable/endtable10.png"/>
                    </li>
                </ul>
            </div>
            <div class="floor5">
                <ul>
                    <li v-for="(item,index) of goodsList[2]" :key="index">
                        <router-link :to="{path:'/details',query:{id:item.id}}">
                            <div class="goodsImg">
                                <img :src='item.pic1'>
                            </div>
                            <span>{{item.name}}</span>
                            <span>￥{{item.price}}</span>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            goodsList:[],
            id:0
        }
    },
    beforeMount() {
        this.id=this.$route.query.id
        this.axios({
            url:`${this.$config.dataUrl}/getPros/chaji`,
            //url:`${this.$config.dataUrl}/api/v1/contents1/category/${id}`,
            method:'get',
            data:{
                id:this.id
            }
        }).then(res=>{
            var Item=res.data.data
            const item=(a,b)=>{
                return Item.slice(a,b)
            }
            this.goodsList.push(item(0,3),item(3,5),item(5,9))
            console.log(this.goodsList)
        })
    },
}
</script>




<style lang="scss" scoped>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin imgStyle($w,$h){
        width : #{$w};
        height: #{$h};
        img{
            width  : 100%;
            height : 100%;
            display: block;
        }
    }
    @mixin titleStyle($w,$h){
        .title{
            width        : 100%;
            margin-bottom: 0.5rem;
            display      : flex;
            span{
                display: inline-block;
                margin : 0 auto;
                @include imgStyle($w,$h);
            }
        }
    }

    @mixin wrapperStyle{
        width   : 12rem;
        margin  : 0 auto;
        position: relative;
        font-size: 0.16rem;
        @include clearfix();
        a{
            color: #666
        }
        li{
            list-style: none;
            span{
                text-align: center;
                display: block;
                width: 100%;
            }
            .goodsImg{
                overflow: hidden;
            }
            &:hover .goodsImg>img{
                transform: scale(1.1,1.1);
                transition: all 0.4s;
            }
        }
        ul{
            padding-inline-start: 0px;
            display: flex;
            margin-bottom: 0;
        }
    }
    .banner{
        @include imgStyle(100%,6.7rem);
        margin-bottom: 0.5rem;
    }
    .wrapper{
        @include wrapperStyle();
    }
    .floor1{
        @include titleStyle(2rem, 1.28rem);
        margin-bottom: 0.5rem;
        .banner1{
            @include imgStyle(12rem,4.62rem )
        }
    }
    .floor2{
        margin-bottom: 0.26rem;
        li{
            &:first-child{
                .goodsImg{
                    @include imgStyle(6.4rem,2.55rem);
                }

            }
            &:not(:first-child){
                .goodsImg{
                    @include imgStyle(2.52rem,2.55rem);
                }
                margin-left:0.27rem;
            }
        }
    }
    .floor3{
        margin-bottom: 0.18rem;
        .adbanner{
            @include imgStyle(12rem, 5.51rem)
        }
    }
    .floor4{
        margin-bottom: 0.26rem;
        li{
            &:last-child{
                @include imgStyle(6.56rem, 2.55rem)
            }
            &:not(:last-child){
                .goodsImg{
                    @include imgStyle(2.52rem,2.55rem);
                }
                margin-right:0.2rem;
            }
        }
    }
    .floor5{
        margin-bottom: 0.26rem;
        li{
            .goodsImg{
                @include imgStyle(2.85rem,2.85rem);
            }
            &:not(:last-child){
                margin-right:0.2rem;
            }
        }
    }
</style>

